<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="合同名称" @clickLeft="back">
			<block slot="right">
				<view class="city">
					<!-- <text>提交</text> -->
				</view>
			</block>
		</uni-nav-bar>
		<view style="margin: 15px">
			<u-form :model="form" ref="uForm" label-position="top" label-width="150px">
				<u-divider text="合同基本信息"></u-divider>
				<u-form-item class="form-item" label="合同名称">
					<u-input placeholder="请输入内容" border="surround" v-model="formData.name" @change="change" :disabled="formDisabled" disabledColor="#ffffff"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="合同客户">
					<u--input :value="clientIdName" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请选择合同类型"
						border="none"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="合同类型" @click="selectContractType">
					<u--input v-model="formData.type" :disabled="formDisabled" disabledColor="#ffffff" placeholder="请选择合同类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="form-item" label="合同编号">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.code" @change="change" :disabled="formDisabled" disabledColor="#ffffff"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="业务接洽人">
					<u--input placeholder="" border="surround" v-model="formData.liaison" @change="change" :disabled="formDisabled" disabledColor="#ffffff"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位名称">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.inspectedDepName"
						@change="change" :disabled="formDisabled" disabledColor="#ffffff"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位联系电话">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.phone" @change="change" :disabled="formDisabled" disabledColor="#ffffff">
					</u--input>
				</u-form-item>
				<u-form-item class="form-item" label="受检单位地址">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.inspectedDepAddress"
						@change="change" :disabled="formDisabled" disabledColor="#ffffff"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="产品数量">
					<u-number-box v-model="formData.num" :min="0" integer :disabled="formDisabled" disabledColor="#ffffff"></u-number-box>
				</u-form-item>
				<u-form-item class="form-item" label="业务科室">
					<u--input placeholder="请输入内容" border="surround" v-model="formData.department" @change="change" :disabled="formDisabled" disabledColor="#ffffff">
					</u--input>
				</u-form-item>
				<u-form-item class="form-item" label="是否分包">
					<u-switch v-model="formData.subPackageDepname == null?false:true" :disabled="formDisabled" disabledColor="#ffffff"></u-switch>
					<u--input v-show="formData.subPackageDepname == null?false:true" placeholder="请输入内容"
						border="surround" v-model="formData" @change="change" :disabled="formDisabled" disabledColor="#ffffff"></u--input>
				</u-form-item>
				<u-form-item class="form-item" label="合同原件">
					<text>移动端暂时无法查看原价，请至PC端查看</text>
				</u-form-item>
				<u-divider text="合同类型"></u-divider>
				<u-form-item class="form-item" label="合同类型">
					<u-radio-group v-model="formData.taskType" placement="column"
						@change="(n)=>onFormCheckBoxValueChange('taskType',n)" :disabled="formDisabled" disabledColor="#ffffff">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in contractOptions"
							:key="index" :label="item.name" :name="item.name" :checked="item == formData.taskType">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item class="form-item" label="评审方式">
					<u-radio-group v-model="formData.method" placement="column"
						 :disabled="formDisabled" disabledColor="#ffffff">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in ['技术负责人或委托代理人审批', '会议评审']"
							:key="item" :label="item" :name="item" :checked="item == formData.method">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item class="form-item" label="分承包项目">
					<u-checkbox-group v-model="formData.subPackageContent" placement="column"
						@change="(n)=>onFormCheckBoxValueChange('subPackageContent',n)" :disabled="formDisabled" disabledColor="#ffffff">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in subItems" :key="index"
							:label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u-form>
			<u-divider text="合同流转记录"></u-divider>
			<view class="uni-contract-list" v-for="(contract, index) in contractHistory" :key="index">
				<view class="uni-contract-list-cell">
					 <view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<text class="uni-contract-list-item-content-step">
								<view>
									<span style="color:black">{{contract.step}}</span></p>
									<span>{{contract.comment || '无评语'}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra">
							<text class="uni-contract-list-item-extra-text">
								<span>{{contract.creatorName}} / {{contract.createTime}}</span>
							</text>
						</view>
					</view>
				</view>
			</view>
			<u-divider text="关联任务"></u-divider>
			<view class="uni-contract-list" v-for="(task, index) in tasks" :key="index">
				<view class="uni-contract-list-cell" v-on:click="navTo('task','taskId=' + task.id)">
					 <view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<text class="uni-contract-list-item-content-step">
								<view>
									<span style="color:black">{{task.code}}</span></p>
									<span>{{task.productName}} / {{task.type}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra" style="align-items: center">
							<text class="uni-contract-list-item-extra-text"><span>></span></text></view>
					</view>
				</view>
			</view>
			<!-- <u-divider text="关联报告"></u-divider> -->

		</view>

		<u-line :dashed="false" style="margin: -2px;"></u-line>
		<u-action-sheet :show="showActionSheet" :actions="actions" @close="showSex = false"
			@select="onFormActionsValueChange"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					id: "",
					type: [],
				},
				showActionSheet: false,
				curActionsKey: "", //当前正在操作的actions
				actions: [],
				contractTypes: [{
						name: '安标检验合同',
						value: 1,
					},
					{
						name: '安标技术审查协议书',
						value: 2,
					},
					{
						name: '矿山在用设备检测检验合同',
						value: 3,
					},
					{
						name: '委托检验合同',
						value: 4,
					},
					{
						name: '强制性认证产品检验合同',
						value: 5,
					}
				],
				contractOptions: [{
						name: '规例行简单任务或客户要求不变的重复性任务',
					},
					{
						name: '新的、复杂的检验任务',
					}
				],
				subItems: [{
						name: '疲劳试验',
					},
					{
						name: '电器产品射频干扰',
					},
					{
						name: '电器产品共、串模干扰',
					},
					{
						name: '电器产品外磁场实验',
					},
					{
						name: '金属材料化学成分分析',
					},
					{
						name: '硬质合金',
					}
				],
				contractHistory: [],
				tasks:[],
				clients: [],
				formDisabled: false
			}
		},
		computed: {
			clientIdName() {
				return this.clients.find((c) => c.id === this.formData.clientId)?.company
			}
		},
		onLoad(options) {

			var this_ = this;
			this.formDisabled = options.edit == 'false'
			//拉取远程数据
			this.getClients()
			this_.loadmore()
		},
		methods: {
			selectContractType() {
				this.curActionsKey = 'type';
				this.actions = this.contractTypes;
				this.showActionSheet = true;
			},
			onFormInputValueChange(inputkey, value) {
				//表单Input类型通用修改
				this.formData[inputkey] = value;
			},
			onFormCheckBoxValueChange(checkboxkey, value) {
				//表单checkbox类型通用修改
				this.formData[checkboxkey] = value;
			},
			onFormActionsValueChange(option) {
				//表单actions类型通用修改
				this.formData[this.curActionsKey] = option.name;
				this.showActionSheet = false;

			},
			navTo(action,query) {
				switch (action){
					case 'task':
					uni.navigateTo({
						url: '/pages/task/detail?edit=false&'+query
					});
						break;
					default:
						break;
				}

			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loadmore() {
				var this_ = this;

				if (this_.options.id != null) {
					var params = {
						id: this_.options.id
					}
					//查询合同详情
					this_.$u.api.contract.detail(params).then(res => {
						this_.formData = res.data;
					});
					//查询合同流转历史
					this_.$u.api.contract.history(params).then(res => {
						this_.contractHistory = res.rows;
					});
					//查询合同任务
					this_.$u.api.contract.tasks(params).then(res => {
						this_.tasks = res.rows;
					});
				}

			},
			getClients() {
				var this_ = this
				var params = {
					params: {
						pageNum: 1,
						pageSize: 10000
					}
				}
				this_.$u.api.client.list(params).then(res => {
					
					this_.clients = res.rows;
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import 'detail.scss';

	page {
		background-color: #f5f5f5;
	}


</style>
